<template>
  <div id="orderDetail">
    <Header></Header>
    <div class="rootMain">
      <div class="topDiv">
        <p>{{$t('m.friendCount')}}：{{speed.friendCount}}{{$t('m.person')}}</p>
        <p>{{$t('m.rechargeCount')}}：{{speed.rechargeCount}}{{$t('m.person')}}</p>
        <p>{{$t('m.releaseRate')}}：{{speed.releaseRate}}%</p>
      </div>
      <div>
        <h4>{{$t('m.speedHistory')}}</h4>
        <div class="list">
          <div class="title">
            <span>{{$t('m.friendPhone')}}</span>
            <span>{{$t('m.rechargeAmount')}}</span>
            <span>{{$t('m.rechargeTime')}}</span>
          </div>
          <ul>
            <li v-for="(item,index) in data" :key="index">
              <span>{{item.extraData.mobile}}</span>
              <span>{{item.gccAmount}} GCC</span>
              <span>{{item.createTime | formatDate}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import Header from "@/components/header";
import { formatDate } from "@/assets/js/filters.js";
import { mapMutations } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      speed: {},
      userObj: {},
      data: []
    };
  },
  created() {
    this.changeTitle(this.$t("m.speedDetail"));
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    Services.getUser({
      token: this.loginToken,
      lang: localStorage.getItem("language")
    }).then(res => {
//    console.log(res);
      if (res.code == "0000") {
        this.userObj = res.user;
        localStorage.setItem("userObj", JSON.stringify(this.userObj));
        Services.getReleaseDetail({
          token: this.loginToken,
          lang: localStorage.getItem("language")
        }).then(res => {
//        console.log(res);
          this.speed = res;
          res.list.forEach(element => {
            element.extraData.mobile = element.extraData.mobile.replace(
              element.extraData.mobile.substr(3, 4),
              "****"
            );
          });
          this.data = res.list;
        });
      } else {
        Toast(res.msg);
        localStorage.removeItem("token");
        localStorage.removeItem("userObj");
        sessionStorage.setItem("loginBack", true);
        sessionStorage.setItem("speed", true);
        this.$router.push(`/login`);
      }
    });
  },
  components: {
    Header
  },
  computed: {},
  methods: {
    ...mapMutations(["changeTitle"])
  },
  filters: {
    formatDate(time) {
      var data = new Date(time);
      return formatDate(data, "yyyy.MM.dd");
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#orderDetail {
  .rootMain {
    top: 0.88rem;
    height: calc(100% - 0.88rem);
    overflow-y: auto;
    > div {
      padding: 0.5rem 0.3rem;
      &.topDiv {
        border-bottom: 1px solid #ddd;
      }
      h4 {
        font-size: 0.26rem;
        margin-bottom: 0.2rem;
        font-weight: bolder;
      }
      .list {
        position: relative;
        .title {
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 100%;
          height: 0.75rem;
          font-weight: bolder;
          background: #a0a0a0;
          padding: 0 0.3rem;
          &::after {
            position: absolute;
            top: 0.75rem;
            left: 0;
            content: "";
            display: block;
            width: calc(100% - 0.8rem);
            height: 0px;
            border: 0.4rem solid rgba(0, 0, 0, 0.5);
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
          }
        }
        ul {
          position: absolute;
          top: 0.75rem;
          width: 100%;
          padding: 0 0.3rem;
          margin-bottom: 0.5rem;
          li {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 0.65rem;
            background: #e6e6e6;
            &:nth-of-type(2n) {
              background: #c5c5c5;
            }
            span {
              width: 33.333333%;
              text-align: center;
            }
          }
        }
      }
      p {
        margin: 0.2rem 0;
      }
    }
  }
}
</style>